<template>
  <header class="comp-header"
    layout layout-align="between center">

    <!-- Left
    -------------------------- -->
    <div layout flex>
      <!-- <i class="comp-header__aside-ctrl iconfont icon-liebiao7"
        @click="$store.commit('Set_AsideIsCollapse', !AsideIsCollapse)"></i> -->
    </div>
    
    <!-- Right
    -------------------------- -->
    <div class="comp-header__right">
      <!-- 主菜单下拉框 -->
      <!-- <menu-dropdown></menu-dropdown> -->
      <!-- 消息提示 -->
      <warning></warning>
      <!-- 用户操作 -->
      <user-dropdown></user-dropdown>
    </div>

  </header>
</template>

<script>
import UserDropdown from './user-dropdown'
import Warning from './warning'
// import MenuDropdown from './menu-dropdown'

export default {
  name: 'CompHeader',
  components: { UserDropdown, Warning },
  data () {
    return {
    }
  }
}
</script>

<style lang="scss">
@import "src/styles/config/components.scss";

@include b(header) {
  width: 100%;
  max-width: $--header-max-width;
  height: $--header-height;
  min-height: $--header-height;
  border-bottom: 1px solid $--header-border-color;
  padding: 0 $--padding-base * 2;

  @include e(right) {
    & > *:not(:last-child) {
      margin-right: $--margin-base * 4;
      transition: margin $--base-transition;
      @include layout('md') { margin-right: $--margin-base * 3; }
      @include layout(('sm', 'xs')) { margin-right: $--margin-base * 2; }
    }
  }
}
</style>
